import React from 'react';
import {BigPlayButton, LoadingSpinner, Player} from 'video-react'
import "video-react/dist/video-react.css";

import {Button, Col, Input, message, Row, Tabs, Upload} from 'antd';
import Api from "../../configs/Api";
import CommonUtil from "../../utils/CommonUtil";
import Screen from "../Base/Screen";

const TabPane = Tabs.TabPane;

class VideoUpload extends Screen {
    constructor(props) {
        super(props);

        this.state = {
            value: props.value || '',
            videoPolicyData: {},
        }
    }

    async componentDidMount() {
        let getPolicyReq = await this.request(Api.UPLOAD_POLICY, {}, false);
        if (getPolicyReq.status !== 0) {
            CommonUtil.toast(getPolicyReq.msg);
            return false;
        } else {
            this.setState({videoPolicyData: getPolicyReq.data});
        }
    }

    componentWillReceiveProps(nextProps) {
        this.setState({value: nextProps.value})
    }

    beforeUpload = async (file) => {
        const isJPG = file.type === 'video/mp4';
        if (!isJPG) {
            message.error('请上传mp4格式的视频');
            return;
        }
        const isLt2M = file.size / 1024 / 1024 < 500;
        if (!isLt2M) {
            message.error('视频应该小于500MB!');
            return;
        }

        let fileKeyReq = await this.request(Api.UPLOAD_FILE_KEY, {filename: file.name}, false);
        if (fileKeyReq.status !== 0) {
            CommonUtil.toast(fileKeyReq.msg);
            return false;
        }

        let policyData = this.state.videoPolicyData;
        policyData.key = fileKeyReq.data;
        this.setState({videoPolicyData: policyData});
    };

    handleChange = (info) => {
        if (info.file.status === 'uploading') {
            console.log('uploading', info.file, info.fileList);
            this.setState({loading: true});
        } else if (info.file.status === 'done') {
            let resp = info.file.response;
            console.log('done', resp);

            if (resp.status !== 0) {
                message.error(`${info.file.name} 文件上传失败`);
            } else {
                this.setState({
                    value: resp.data,
                    loading: false,
                }, () => {
                    this.props.onChange(this.state.value);
                });
            }
        } else if (info.file.status === 'error') {
            message.error(`${info.file.name} 文件上传失败`);
        }
    };

    render() {
        return (
            <div>
                <Tabs defaultActiveKey="1">
                    <TabPane tab={<span>URL</span>} key="1">
                        <div>
                            <Row gutter={10}>
                                <Col xs={{span: 24}} lg={{span: 4}}>
                                    视频URl：
                                </Col>
                                <Col xs={{span: 24}} lg={{span: 20}}>
                                    <Input value={this.state.value} onChange={(e) => {
                                        this.setState({value: e.target.value}, () => {
                                            this.props.onChange(this.state.value);
                                        })
                                    }}/>
                                    {
                                        !!this.state.value ? (
                                            <div className="margin-top-10">
                                                <Player ref="player">
                                                    <BigPlayButton position="center"/>
                                                    <source src={this.state.value}/>
                                                    <LoadingSpinner/>
                                                </Player>
                                            </div>
                                        ) : null
                                    }
                                </Col>
                            </Row>
                        </div>
                    </TabPane>
                    <TabPane tab={<span>本地上传</span>} key="2">
                        <div className="margin-top-10">
                            {
                                !!this.state.value ? (
                                    <div className="margin-top-10">
                                        <Player ref="player">
                                            <BigPlayButton position="center"/>
                                            <source src={this.state.value}/>
                                            <LoadingSpinner/>
                                        </Player>
                                    </div>
                                ) : null
                            }
                        </div>
                        <div className="margin-top-10">
                            <Upload
                                name="file"
                                accept={'.mp4'}
                                showUploadList={true}
                                data={this.state.videoPolicyData}
                                action={this.state.videoPolicyData.host}
                                beforeUpload={this.beforeUpload}
                                onChange={this.handleChange}
                            >
                                <Button type="primary">上传视频</Button>
                            </Upload>
                        </div>
                        <div className="margin-top-10">
                            最多可以上传1个视频，建议尺寸800*800px，格式为.mp4
                        </div>
                    </TabPane>
                </Tabs>
            </div>
        )
    }
}

export default VideoUpload;
